<template>
  <div class="Home__view">
    <app-header></app-header>
    <div class="Search__wrap">
      <div class="Search__content">
        <div class="Search__input-group">
          <!-- <base-popover
            placement="bottom"
            trigger="click"
            width="120" popper-class="theme-popover">
            <div class="theme-items">
              <div
                v-for="item in themeOptions"
                :key="item.value"
                class="theme-item"
                :class="{ 'active': selectedTheme === item.value }"
                @click="selectedTheme = item.value">
                {{ item.label }}
              </div>
            </div>
            <template #reference>
              <div class="theme-trigger">
                <i class="base-icon-s-operation"></i>
                {{ selectedTheme ? themeOptions.find(item => item.value === selectedTheme).label : '主题' }}
              </div>
            </template>
          </base-popover> -->
          <!-- <base-divider direction="vertical"></base-divider> -->
          <input
            class="Search__input"
            v-model="searchKeyword"
            placeholder="请输入搜索关键词" />
          <base-button @click="handleSearch">
            <i class="base-icon-search"></i>
            &nbsp;资源搜索
          </base-button>
        </div>
        <div class="Search__advanced" @click="hadleSubmitArticle">
          论文投稿
        </div>
      </div>
    </div>
    <div class="Tools__wrap" v-if="!(magazine && magazine.id)">
      <div class="Tools__contents">
        <div class="Tools__content">
          <div class="Tools__title Tools__title--yybfw">
            预印本服务
          </div>
          <div class="Tools__items">
            <div class="Tools__item" style="border-right:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3;" @click="$router.push('/microapp/eprint/preSubmitUpload')">
              <img src="../assets/images/home/tools_lwtj.png" />
              <div>论文投稿</div>
            </div>
            <div class="Tools__item"  style="border-bottom:1px solid #f3f3f3;" @click="$router.push('/microapp/eprint/searchList')">
              <img src="../assets/images/home/tools_lwll.png"/>
              <div>论文浏览</div>
            </div>
            <div class="Tools__item" style="border-right:1px solid #f3f3f3;" @click="$router.push('/microapp/eprint/searchList')">
              <img src="../assets/images/home/tools_lwjs.png" />
              <div>论文检索</div>
            </div>
            <div class="Tools__item" @click="$router.push('/microapp/eprint/myAllPaper')">
              <img src="../assets/images/home/tools_lwgl.png" />
              <div>论文管理</div>
            </div>
          </div>
        </div>
        <div class="Tools__content">
          <div class="Tools__title Tools__title--szzyfw">
            数字资源导航
          </div>
          <div class="Tools__items">
            <div class="Tools__item" style="border-right:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3;" @click="$router.push('/journal')">
              <img src="../assets/images/home/tools_qkzy.png" />
              <div>期刊资源导航</div>
            </div>
            <div class="Tools__item"  style="border-bottom:1px solid #f3f3f3;" @click="$router.push('/conference')">
              <img src="../assets/images/home/tools_lwzy.png"/>
              <div>会议论文资源</div>
            </div>
            <div class="Tools__item" style="border-right:1px solid #f3f3f3;"  @click="$router.push('/resource/video')">
              <img src="../assets/images/home/tools_spzy.png" />
              <div>电子资源导航</div>
            </div>
            <div class="Tools__item" @click="$router.push('/diancang')">
              <img src="../assets/images/home/tools_ypzy.png" />
              <div>数字典藏馆</div>
            </div>
          </div>
        </div>
        <div class="Tools__content">
          <div class="Tools__title Tools__title--tsfw">
            特色服务
          </div>
          <div class="Tools__items">
            <div class="Tools__item" style="border-right:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3;">
              <img src="../assets/images/home/tools_lwcc.png" />
              <div>论文查重</div>
            </div>
            <div class="Tools__item"  style="border-bottom:1px solid #f3f3f3;">
              <img src="../assets/images/home/tools_aigg.png"/>
              <div>AI改稿</div>
            </div>
            <div class="Tools__item" style="border-right:1px solid #f3f3f3;">
              <img src="../assets/images/home/tools_znps.png" />
              <div>智能评审</div>
            </div>
            <div class="Tools__item">
              <img src="../assets/images/home/tools_pbzs.png" />
              <div>排版助手</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Journal__wrap" v-if="!(magazine && magazine.id)">
      <div class="Journal__content">
        <div class="Title__wrap">
          <div class="Title__content">
            入驻期刊
          </div>
          <div class="More__content">
            <div class="More__btn">
              <i class="base-icon-edit"></i>&nbsp;
              <router-link to="/microapp/eprint/preSubmitUpload">
                作者投稿
              </router-link>
            </div>
            <div class="More__btn">
              <svg t="1753840042663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5094" width="13" height="13"><path d="M869.3248 211.0464a235.81184 235.81184 0 0 0-78.6432-52.0704 239.80544 239.80544 0 0 0-89.7024-17.3568c-61.0304 0-122.0608 23.1424-168.3456 69.4272l-20.5312 20.5824-0.4096-0.4096L491.52 211.0464c-46.336-46.2848-107.3664-69.4272-168.3456-69.4272-61.0304 0-122.0608 23.1424-168.3968 69.4272-46.2848 46.336-69.4272 107.3664-69.4272 168.3968s23.1424 122.0608 69.4272 168.3456l319.0784 319.0272c10.3936 10.3936 23.9616 15.5648 37.5296 15.5648h1.3312c13.568 0 27.136-5.1712 37.5296-15.5648l319.0784-319.0272c92.5696-92.6208 92.5696-244.1216 0-336.7424zM511.3856 841.4208c-2.2528 0-5.632-0.6144-8.5504-3.5328l-298.496-298.496-20.5824-20.5824c-37.0176-37.0688-57.4464-86.528-57.4464-139.3664s20.4288-102.3488 57.4464-139.4176c37.0688-37.0176 86.5792-57.4464 139.4176-57.4464s102.2976 20.4288 139.3664 57.4464l19.968 19.968-82.2272 82.2272c-23.3472 23.3472-25.7024 61.44-3.584 85.9136a60.5696 60.5696 0 0 0 22.4768 15.7696c7.424 2.9696 15.3088 4.4544 23.1424 4.4544 15.7696 0 31.5392-5.9392 43.4688-17.92l77.6704-77.6704c3.2768-3.2768 8.6016-3.2768 11.8784 0l214.8352 214.8352-53.248 53.248-124.2624-124.3136c-8.0384-7.9872-20.992-7.9872-28.9792 0s-7.9872 20.9408 0 28.9792l124.3136 124.2624-42.7008 42.752-124.3136-124.3136c-8.0384-7.9872-20.992-7.9872-28.9792 0s-7.9872 20.9408 0 28.9792l124.3136 124.3136-42.7008 42.7008-124.3136-124.3136c-8.0384-7.9872-20.992-7.9872-28.9792 0s-7.9872 20.9408 0 28.9792l124.3136 124.3136-44.6464 44.6464c-2.6624 2.6624-5.6832 3.3792-7.936 3.4816-0.256 0.1024-0.4608 0.1024-0.6656 0.1024z m328.96-322.6112l-20.5312 20.5312-221.6448-221.6448-23.0912-23.0912c-3.328-3.328-8.7552-3.2768-12.032 0.1536-8.2944 8.704-22.5792 23.2448-22.5792 23.2448L456.8064 401.5616c-5.12 5.12-11.264 5.888-14.4896 5.888-3.1744 0-9.3184-0.768-14.4896-5.888-7.8336-7.8848-7.8336-21.1456 0-28.9792L511.488 288.9728l29.5424-28.416 20.5312-20.5312c37.0688-37.0176 86.5792-57.4464 139.4176-57.4464s102.3488 20.4288 139.3664 57.4464c37.0688 37.0688 57.4464 86.5792 57.4464 139.4176s-20.3776 102.2976-57.4464 139.3664z" fill="#666666" p-id="5095"></path></svg>
              &nbsp;期刊合作
            </div>
            <div class="More__text" @click="$router.push('/journal')">查看更多<i class="base-icon-plus"></i></div>
          </div>
        </div>
        <div class="Journal__items">
          <div class="Journal__item" v-for="item,index in journalList" :key="index">
            <div class="Journal__cover">
              <img @click="$router.push('/journalDetail/' + item.id)" :src="item.coverImg ? item.coverImg.replace('http://124.16.154.205:9000/','/minioUrl/') : 'https://file.scholarin.cn/files?fastdfspath=group1/M02/A7/F8/CgMLDmiC_rGAIPudAAEqmvRkHS04070611'" alt="Journal Cover" />
            </div>
            <div class="Journal__info">
              <div class="Journal__title" @click="$router.push('/journalDetail/' + item.id)">{{ item.journalTitle }}</div>
              <div class="Journal__meta">{{ item.journalTheme }}</div>
              <div class="Journal__details">
                <div class="Journal__period">发行周期: {{ item.period }}</div>
                <div class="Journal__articles">论文量: {{ item.articleTotal }}篇</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="New__wrap" v-if="!(magazine && magazine.id)">
      <div class="New__content">
        <div class="NewYYB__wrap">
          <div class="Title__wrap">
            <div class="Title__content">
              最新预印本论文
            </div>
            <div class="More__content">
              <div class="More__text">  
                <router-link to="/microapp/eprint/searchList">
                  查看更多
                </router-link><i class="base-icon-plus"></i>
              </div>
            </div>
          </div>
          <div class="NewYYB__content">
             <div
              class="NewYYB__item"
              v-for="item in lastedEprintList"
              :key="item.id"
            >
              <div class="NewYYB__text">
                <router-link
                  :to="`/microapp/eprint/absDetail/${item.csoaId}`"
                  class="NewYYB__link"
                >
                  {{ item.title }}
                </router-link>
              </div>
              <div class="NewYYB__line"></div>
            </div>
          </div>
        </div>
        <div class="YYBKeyword__wrap">
          <div class="Title__wrap">
            <div class="Title__content">
              预印本主题词知识图谱
            </div>
            <div class="More__content">
            </div>
          </div>
          <div class="YYBKeyword__content" id="chart1">

          </div>
        </div>
      </div>
    </div>
    <div class="Count__wrap">
      <div class="Count__content">
        <div class="Count__item" v-if="!(magazine && magazine.id)">
          <div class="Count__num"><span>{{ eprintTotal }}</span>&nbsp;篇</div>
          <div class="Count__title">预印本</div>
        </div>
        <div class="Count__item">
          <div class="Count__num"><span>{{journalTotal}}</span>&nbsp;个</div>
          <div class="Count__title">学术期刊</div>
        </div>
        <div class="Count__item">
          <div class="Count__num"><span>{{ journalArticleTotal }}</span>&nbsp;篇</div>
          <div class="Count__title">期刊论文</div>
        </div>
        <div class="Count__item">
          <div class="Count__num"><span>{{videoTotal}}</span>&nbsp;个</div>
          <div class="Count__title">数字视频</div>
        </div>
        <div class="Count__item">
          <div class="Count__num"><span>{{audioTotal}}</span>&nbsp;个</div>
          <div class="Count__title">数字音频</div>
        </div>
      </div>
    </div>
    <div class="Hot__wrap">
      <div class="Hot__content">
        <div class="Title__wrap">
          <div class="Title__content">
            热门数据资源
          </div>
          <div class="More__content">
          </div>
        </div>
        <div class="HotJournal__wrap">
          <div class="Title__wrap">
            <div class="Title__content--1">
              期刊资源
            </div>
            <div class="More__content">
              <div class="More__text">
                  <router-link :to="{path: '/microapp/eprint/searchList',query: {isJournal: '1'}}">
                    查看更多
                  </router-link>
                  <i class="base-icon-plus"></i>
              </div>
            </div>
          </div>
          <div class="HotJournal__content">
            <div class="HotJournal__item" v-for="item,index in journalArticleList" :key="index">
              <div class="HotJournalItem__wrap">
                <div class="HotJournal__type">
                  论文
                </div>
                <div class="HotJournal__text">
                  <router-link
                    :to="`/microapp/eprint/absDetail/${item.csoaid}`"
                    class="NewYYB__link"
                  >
                    {{ item.title }}
                  </router-link>
                </div>
                <div class="HotJournal__date">{{ item.createTime.slice(0,10) }}</div>
                <div class="HotJournal__num">订阅量{{ item.hits }}次</div>
              </div>
              <div class="HotJournal__line"></div>
            </div>
          </div>
        </div>
        <div class="HotVideo__wrap" v-if="resourceList && resourceList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              电子资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/resource/video')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotVideo__content">
            <div class="HotVideo__item" v-for="item in resourceList" :key="item.id" @click="goResourceDetail(item.id)">
              <div class="HotVideo__thumbnail">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
                <div class="HotVideo__play-btn" v-if="item.type == 'video' || item.type == 'audio'">
                  <div class="HotVideo__play-icon">
                    <i class="base-icon-caret-right"></i>
                  </div>
                </div>
              </div>
              <div class="HotVideo__info">
                <div class="type__create-time">
                  <base-tag size="mini" type="primary">{{resourceTypeMap[item.type]}}</base-tag>
                  <div class="create-time">{{item.createTime.substr(0, 10)}}</div>
                </div>
                <div class="HotVideo__title">{{ item.name }}</div>
                <div class="HotVideo__tags" v-if="item.tag">
                  <span class="HotVideo__tag" v-for="tag,index in item.tag.split(';')" :key="'tag'+index">{{ tag }}</span>
                </div>
                <div class="HotVideo__meta">
                  <div class="HotVideo__author"><span>{{authorLabel(item.type)}}：</span>{{(item.type == 'video' || item.type == 'audio' || item.type == 'text')?item.speaker:item.author}}</div>
                  <div class="HotVideo__institution" v-if="item.type == 'video' || item.type == 'audio' || item.type == 'text'"><span>主办单位：</span>{{item.organizer}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--<div class="HotVideo__wrap" v-if="videoList && videoList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              视频资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/videoAudio/video')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotVideo__content">
            <div class="HotVideo__item" v-for="item in videoList" :key="item.id" @click="goVideoAudio(item.id)">
              <div class="HotVideo__thumbnail">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
                <div class="HotVideo__play-btn">
                  <div class="HotVideo__play-icon">
                    <i class="base-icon-caret-right"></i>
                  </div>
                </div>
              </div>
              <div class="HotVideo__info">
                <div class="HotVideo__title">{{ item.name }}</div>
                <div class="HotVideo__tags" v-if="item.tag">
                  <span class="HotVideo__tag" v-for="tag,index in item.tag.split(';')" :key="'tag'+index">{{ tag }}</span>
                </div>
                <div class="HotVideo__meta">
                  <div class="HotVideo__author"><span>主讲人：</span>{{item.speaker}}</div>
                  <div class="HotVideo__institution"><span>主办单位：</span>{{item.organizer}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
         <div class="HotAudio__wrap" v-if="audioList && audioList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              音频资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/videoAudio/audio')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotAudio__content">
            <div class="HotAudio__item" v-for="item in audioList" :key="item.id" @click="goVideoAudio(item.id)">
              <div class="HotAudio__thumbnail">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
              </div>
              <div class="HotAudio__info">
                <div class="HotAudio__title">{{ item.name }}</div>
                <div class="HotAudio__meta">
                  <div class="HotAudio__author">{{ item.speaker }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="HotAudio__wrap" v-if="textList && textList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              文字资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/text/text')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotAudio__content">
            <div class="HotAudio__item" v-for="item in textList" :key="item.id" @click="goVideoAudio(item.id)">
              <div class="HotAudio__thumbnail" v-if="item.cover">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
              </div>
              <div class="HotAudio__info">
                <div class="HotAudio__title">{{ item.name }}</div>
                <div class="HotAudio__meta">
                  <div class="HotAudio__author">{{ item.speaker }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="HotAudio__wrap" v-if="postList && postList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              文章资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/resource/post')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotAudio__content">
            <div class="HotAudio__item" v-for="item in postList" :key="item.id" @click="goResourceDetail(item.id)">
              <div class="HotAudio__thumbnail" v-if="item.cover">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
              </div>
              <div class="HotAudio__info">
                <div class="HotAudio__title">{{ item.name }}</div>
                <div class="HotAudio__meta">
                  <div class="HotAudio__author">{{ item.author }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="HotAudio__wrap" v-if="patentList && patentList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              专利资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/resource/patent')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotAudio__content">
            <div class="HotAudio__item" v-for="item in patentList" :key="item.id" @click="goResourceDetail(item.id)">
              <div class="HotAudio__thumbnail" v-if="item.cover">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
              </div>
              <div class="HotAudio__info">
                <div class="HotAudio__title">{{ item.name }}</div>
                <div class="HotAudio__meta">
                  <div class="HotAudio__author">{{ item.author }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="HotAudio__wrap" v-if="standardList && standardList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              标准资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/resource/standard')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotAudio__content">
            <div class="HotAudio__item" v-for="item in standardList" :key="item.id" @click="goResourceDetail(item.id)">
              <div class="HotAudio__thumbnail" v-if="item.cover">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
              </div>
              <div class="HotAudio__info">
                <div class="HotAudio__title">{{ item.name }}</div>
                <div class="HotAudio__meta">
                  <div class="HotAudio__author">{{ item.author }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="HotAudio__wrap" v-if="reportList && reportList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              报告资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/resource/report')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotAudio__content">
            <div class="HotAudio__item" v-for="item in reportList" :key="item.id" @click="goResourceDetail(item.id)">
              <div class="HotAudio__thumbnail" v-if="item.cover">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
              </div>
              <div class="HotAudio__info">
                <div class="HotAudio__title">{{ item.name }}</div>
                <div class="HotAudio__meta">
                  <div class="HotAudio__author">{{ item.author }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="HotAudio__wrap" v-if="ebookList && ebookList.length">
          <div class="Title__wrap">
            <div class="Title__content--1">
              电子书资源
            </div>
            <div class="More__content">
              <div class="More__text" @click="$router.push('/resource/ebook')">查看更多<i class="base-icon-plus"></i></div>
            </div>
          </div>
          <div class="HotAudio__content">
            <div class="HotAudio__item" v-for="item in ebookList" :key="item.id" @click="goResourceDetail(item.id)">
              <div class="HotAudio__thumbnail" v-if="item.cover">
                <img :src="item.cover.replace('http://124.16.154.205:9000/','/minioUrl/')" alt="Video Thumbnail" />
              </div>
              <div class="HotAudio__info">
                <div class="HotAudio__title">{{ item.name }}</div>
                <div class="HotAudio__meta">
                  <div class="HotAudio__author">{{ item.author }}</div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="News__wrap">
      <div class="News__content">
        <div class="Title__wrap">
          <div class="Title__content">
            会议资讯
          </div>
          <div class="More__content">
            <router-link to="/news" class="More__text">查看更多<i class="base-icon-plus"></i></router-link>
          </div>
        </div>
        <div class="News__card">
          <div class="News__cover">
            <img :src="newsList.length > 0 ? newsList[0].newsCoverImg.replace('http://124.16.154.205:9000/','/minioUrl/') : '../assets/images/home/news_cover.png'" />
          </div>
          <div class="News__items">
            <div class="News__item" v-for="item in newsList" :key="item.id" @click="goToNewsDetail(item.id)">
              <div class="NewsItem__wrap">
                <div class="News__text">
                  {{ item.newsTitle }}
                </div>
                <div class="News__date">{{ item.createTime.slice(0,10) }}</div>
              </div>
              <div class="News__line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import AppHeader from './components/AppHeader.vue';
import AppFooter from './components/AppFooter.vue';
import { SearchArticles, GetKnowledgeGraph } from "@/service/article";
import {GetAllJournal, GetAllArticle} from "@/service/journal";
import {ListNews} from "@/service/news";
import {ListVideoAudio} from '../service/videoAudio'
import {ListResource} from "@/service/resource";
export default {
  components: { AppHeader, AppFooter },
  data() {
    return {
      searchKeyword: '',
      selectedTheme: '',
      themeOptions: [
        { value: 'theme1', label: '主题一' },
        { value: 'theme2', label: '主题二' }
      ],
      journalTotal:0,
      journalList:[],
      journalArticleList:[],
      journalArticleTotal:0,
      newsList: [],
      lastedEprintList: [],
      eprintTotal: 0,
      graphData: null,
      resourceList:[],
      videoTotal:0,
      audioTotal:0,
      videoList:[],
      audioList:[],
      textList:[],
      postList:[],
      patentList:[],
      standardList:[],
      reportList:[],
      ebookList:[],
    }
  },
  mounted() {
    if (!(this.magazine && this.magazine.id)) {
      this.getLastedEprintList();
      this.getKnowledgeGraphAndInit();
    }
    this.getJournal();
    this.getArticle();
    this.getNews();
    this.getVideoAudio("video");
    this.getVideoAudio("audio");
    // this.getVideoAudio("text");
    // this.getResource("post");
    // this.getResource("patent");
    // this.getResource("standard");
    // this.getResource("report");
    // this.getResource("ebook");
    this.getResource("");
    console.log("home mounted", this.magazine);
  },
  methods: {
    handleSearch() {
      window.location.href = `/microapp/eprint/digitalPaperSearchList?searchText=${this.searchKeyword}`;
      // 处理搜索逻辑
    },
    hadleSubmitArticle() {
      window.location.href = `/microapp/eprint/preSubmitUpload`;
    },
    async getLastedEprintList() {
      try {
        const res = await SearchArticles({ page: 0, pageSize: 10 });
        this.lastedEprintList = res?.data?.list || [];
        this.eprintTotal = res?.data?.total || 0;
      } catch (e) {
        this.lastedEprintList = [];
      }
    },
    authorLabel(type) {
      const labels = {
        video: '主讲人',
        audio: '主讲人',
        text: '作者',
        post: '作者',
        patent: '发明人',
        standard: '起草人',
        report: '作者',
        ebook: '作者',
      };
      return labels[type] || '作者';
    },
    getJournal(){
         GetAllJournal({
             page:0,
             size:6,
             status:1,
             magazineId:this.magazine?.id,
         }).then(e => {
             if (e && e.data && e.data.records){
                this.journalTotal = e.data.total;
                this.journalList = e.data.records;
             }
         }).catch(e => {
             this.$message.error(e.message)
         })
    },
    getArticle(){
        this.loading = true;
        GetAllArticle({
            page:0,
            size:7,
            isHome:1,
            sys_magazineId:this.magazine?.id,
        }).then(e => {
            if (e && e.data && e.data.records){
                this.journalArticleList = e.data.records;
                this.journalArticleTotal = e.data.total;
            }
        }).catch(e => {
            this.$message.error(e.message)
        })
    },
    getVideoAudio(type){
        let params = {
            page:1,
            pageSize:4,
            status:"1",
            type:type,
            magazine:this.magazine ? this.magazine.id : '',
        }
        ListVideoAudio(params).then(res=>{

            let data = res.data;
            if(type == 'video'){
              this.videoTotal = data.total;
              this.videoList = data.records;
            }
            if(type == 'audio'){
              this.audioTotal = data.total;
              this.audioList = data.records;
            }
            if(type == 'text'){
              this.textList = data.records;
            }
        });
    },
    getResource(type){
      let params = {
        page:1,
        pageSize:8,
        status:"1",
        type:"",
        magazine:this.magazine ? this.magazine.id : '',
      }
      ListResource(params).then(res=>{
        let data = res.data;
        this.resourceList = data.records
        if(type === 'post'){
          this.postList = data.records;
        }
        if(type === 'patent'){
          this.patentList = data.records;
        }
        if(type === 'standard'){
          this.standardList = data.records;
        }
        if(type === 'report'){
          this.reportList = data.records;
        }
        if(type === 'ebook'){
          this.ebookList = data.records;
        }
      });
    },
    goVideoAudio(id){
      window.open(this.$router.resolve("/videoAudioDetail/"+id).href)
    },
    goResourceDetail(id){
      window.open(this.$router.resolve("/resourceDetail/"+id).href)
    },
    getNews() {
      ListNews({
        page:0,
        size:8,
      }).then(e => {
        if (e && e.data && e.data.records) {
          this.newsList = e.data.records;
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    goToNewsDetail(newsId) {
      const routeData = this.$router.resolve({path: `/news/${newsId}`});
      window.open(routeData.href, '_blank');
    },
    async getKnowledgeGraphAndInit() {
      const res = await GetKnowledgeGraph();
      const graph = res?.data || {};
      this.graphData = graph;
      this.initChart1(graph);
    },
    initChart1(graph) {
      graph.nodes.forEach(function (node) {
        node.label = {
          show: node.symbolSize > 30,
        };
      });
      var myChart = echarts.init(document.getElementById("chart1"));
      let option = {
        tooltip: {},
        legend: [
          {
            data: graph.categories.map((a) => a.name),
          },
        ],

        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            legendHoverLink: false,
            data: graph.nodes.map((n) => ({
              ...n,
              symbolSize: n.symbolSize
                ? Math.max(10, Math.min(30, n.symbolSize))
                : 16,
            })),

            links: graph.edges.map((e) => ({
              source: e.source,
              target: e.target,
              lineStyle: {
                color:
                  e.colorType === 1
                    ? "#409EFF"
                    : e.colorType === 2
                    ? "#E6A23C"
                    : "#67C23A",
                width: e.count > 3 ? 2 : 1,
              },
            })),
            categories: graph.categories,
            roam: true,
            label: {
              position: "right",
              formatter: "{b}",
            },
            labelLayout: { hideOverlap: true },
            lineStyle: { color: "source", curveness: 0.3 },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10,
              },
            },
            animation: true,
          },
        ],
        graphic: {
          type: "group",
          left: "center",
          top: "center",
        },
      };
      myChart.setOption(option);
      myChart.resize();
    },
  }
}
</script>

<style lang="scss" scoped>
  @import '@zkwq/business/dist/var.scss';
  .Home__view {
    height: 100%;
    background-color: #f5f5f5;
    .Search__wrap{
      height: 348px;
      background: url('../assets/images/home/search_bg.png');
      background-size: 100%;
      background-repeat: no-repeat;
      overflow: hidden;
      display: flex;
      justify-content: center;
      .Search__content{
        display: flex;
        align-items: center;
        padding: 20px;
        width: fit-content;
        gap:16px;
        margin:0 auto;
        // margin-top: 150px;
        .Search__input-group{
          background: white;
          border-radius: 4px;
          display: flex;
          align-items: center;
          gap: 8px;
          width: 800px;
          padding: 8px 8px;
          font-size: 16px;
          .theme-trigger{
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0px 4px;
            color: $--color-primary;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
            gap: 12px;
          }
          .Search__input{
            width: 0px;
            flex: 1;
          }
        }
        .Search__advanced{
          border-radius: 4px;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 18px 24px;
          background-color: $--color-warning;
          color:white;
          font-size: 16px;
          cursor: pointer;
          user-select: none;
          &:hover{
            opacity: .9;
          }
        }
      }
    }
    .Tools__wrap{
      width: 100%;
      background: white;
      padding: 48px 0px;
      .Tools__contents{
        width: 1200px;
        height: fit-content;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 20px;
        
        
        .Tools__content{
          width: 0px;
          flex: 1;
          height: fit-content;
          background-color: white;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          .Tools__title{
            width: 100%;
            height: 124px;
            border-radius: 8px 8px 0px 0px;
            font-size: 20px;
            font-weight: bold;
            color: white;
            display: flex;
            align-items: center;
            padding-left: 30px;
          }
          .Tools__title--yybfw{
            background: url('../assets/images/home/tools_yybfw.png');
            background-size: 100%;
          }
          .Tools__title--tsfw{
            background: url('../assets/images/home/tools_tsfw.png');
            background-size: 100%;
          }
          .Tools__title--szzyfw{
            background: url('../assets/images/home/tools_szzyfw.png');
            background-size: 100%;
          }
          .Tools__items{
            width: 100%;
            height: 200px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            .Tools__item{
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 12px;
              cursor: pointer;
              img{
                width: 32px;
              }
              &:hover{
                background-color: $--color-primary;
                color: white;
              }
            }
  
          }
        }
      }
    }
    .Journal__wrap{
      width: 100%;
      padding: 48px;
      .Journal__content{
        width: 1200px;
        margin:0 auto;
        .Journal__items{
          margin-top: 24px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 20px;
          .Journal__item{
            background: white;
            border-radius: 8px;
            padding: 16px;
            display: flex;
            gap: 16px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s ease;
            &:hover{
              box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
              transform: translateY(-2px);
              img{
                transform: scale(1.1);
              }
            }
            .Journal__cover{
              width: 80px;
              height: 100px;
              flex-shrink: 0;
              overflow: hidden;
              cursor: pointer;
              img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 4px;
                background-color: #f0f0f0;
                transition: all 0.3s ease-out;
              }
            }
            .Journal__info{
              flex: 1;
              display: flex;
              flex-direction: column;
              gap: 8px;
              .Journal__title{
                font-size: 16px;
                font-weight: bold;
                color: #333;
                line-height: 1.4;
              }
              .Journal__meta{
                font-size: 12px;
                color: #666;
                line-height: 1.4;
              }
              .Journal__details{
                margin-top: auto;
                display: flex;
                flex-direction: column;
                gap: 4px;
                .Journal__period,
                .Journal__articles{
                  font-size: 12px;
                  color: #999;
                }
              }
            }
          }
        }
      }
    }
    .New__wrap{
      width: 100%;
      background-color: white;
      padding: 48px 0px;
      .New__content{
        width: 1200px; 
        margin: 0 auto;
        display: flex;
        gap: 16px;
        .NewYYB__wrap{
          width:0;
          flex: 1;
          overflow: hidden;
          .NewYYB__content{
            width: 100%;
            height: 374px;
            margin-top: 24px;
            .NewYYB__link {
              color: inherit;
              text-decoration: none;
            }
            .NewYYB__item{
              .NewYYB__text{
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: $--color-text-regular;
                padding: 8px;
                cursor: pointer;
                border-radius: 4px;
                margin: 4px 0px;
                &:hover{
                  background-color: $--color-primary;
                  color: white;
                }
              }
              .NewYYB__line{
                width: 100%;
                border-bottom: 1px dashed $--border-color-base;
              }
            }
          }
        }
        .YYBKeyword__wrap{
          width:0;
          flex: 1;
          .YYBKeyword__content{
            width: 100%;
            height: 374px;
            padding: 12px;
            margin-top: 24px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 6px;
          }
        }
      }
    }
    .Count__wrap{
      width: 100%;
      background: url('../assets/images/home/count_bg_1.png');
      background-size: 100% auto;
      padding: 48px 0px;
      height: 448px;
      .Count__content{
        width: 500px;
        height: fit-content;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 36px;
        margin-left: calc(50% + 30px);
        margin-top: 100px;
        .Count__item{
          width: calc(33.3% - 24px);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 8px;
          .Count__num{
            font-size: 13px;
            color: $--color-text-secondary;
            span{
              font-size: 20px;
              font-weight: bold;
              color: $--color-primary;
            }
          }
          .Count__title{
            font-size: 15px;
            font-weight: bold;
          }
        }
      }
    }
    .Hot__wrap{
      width: 100%;
      background: #fff;
      padding: 48px 0px;
      .Hot__content{
        width: 1200px;
        margin: 0 auto;
        .HotJournal__wrap{
          width: 100%;
          margin-top: 24px;
          .HotJournal__content{
            margin-top: 16px;
            .HotJournal__item{
              .HotJournalItem__wrap{
                width: 100%;
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 0px 4px;
                border-radius: 4px;
                &:hover{
                  background-color: $--color-primary;
                  color: white;
                  .HotJournal__text,.HotJournal__date,.HotJournal__num{
                    color: white;
                  }
                }
                .HotJournal__type{
                  font-size: 12px;
                  color: white;
                  background: $--color-primary;
                  padding: 2px 4px;
                  border-radius: 4px;
                }
                .HotJournal__date{
                  color:$--color-text-secondary-2;
                }
                .HotJournal__num{
                  color:$--color-primary;
                }
                .HotJournal__text{
                  width: 0px;
                  flex: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: $--color-text-regular;
                  padding: 8px;
                  cursor: pointer;
                  border-radius: 4px;
                  margin: 4px 0px;
                }
              }
              .HotJournal__line{
                width: 100%;
                border-bottom: 1px dashed $--border-color-base;
              }
            }
          }
        }
        .HotVideo__wrap{
          width: 100%;
          margin-top: 24px;

          .HotVideo__content{
            width: 100%;
            margin-top: 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;

            .HotVideo__item{
              width: calc(25% - 12px);
              background: white;
              border-radius: 8px;
              overflow: hidden;
              box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover{
                box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
              }

              .HotVideo__thumbnail{
                width: 100%;
                height: 120px;
                overflow: hidden;
                position: relative;

                img{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: all 0.3s ease;
                }

                .HotVideo__play-btn{
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 40px;
                  height: 40px;
                  background: rgba(0, 0, 0, 0.6);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: all 0.3s ease;

                  .HotVideo__play-icon{
                    color: white;
                    font-size: 20px;
                  }
                }

                &:hover {
                  img{
                    transform: scale(1.05);
                  }
                  
                  .HotVideo__play-btn{
                    background: rgba(0, 0, 0, 0.8);
                    transform: translate(-50%, -50%) scale(1.1);
                  }
                }
              }

              .HotVideo__info{
                padding: 12px;
                display: flex;
                flex-direction: column;
                gap: 8px;

                .type__create-time{
                  display: flex;
                  justify-content: space-between;
                  align-content: center;
                  .create-time{
                    font-size: 12px;
                    color: #646464;
                  }
                }

                .HotVideo__title{
                  font-size: 14px;
                  font-weight: bold;
                  color: #333;
                  line-height: 1.4;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .HotVideo__subtitle{
                  font-size: 12px;
                  color: #666;
                  line-height: 1.4;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .HotVideo__tags{
                  display: flex;
                  flex-wrap: wrap;
                  gap: 4px;

                  .HotVideo__tag{
                    font-size: 10px;
                    color: $--color-primary;
                    background: $--color-primary-light-9;
                    border: 1px solid $--color-primary-light-7;
                    padding: 2px 6px;
                    border-radius: 12px;
                    white-space: nowrap;
                  }
                }

                .HotVideo__meta{
                  margin-top: 4px;
                  display: flex;
                  flex-direction: column;
                  gap: 6px;

                  .HotVideo__author,
                  .HotVideo__institution{
                    font-size: 11px;
                    color: #999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    span{
                      font-size: 12px;
                      color:$--color-text-regular;
                    }
                  }
                }
              }
            }
          }
        }
        .HotAudio__wrap{
          width: 100%;
          margin-top: 24px;

          .HotAudio__content{
            width: 100%;
            margin-top: 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 16px;

            .HotAudio__item{
              width: calc(25% - 12px);
              background: white;
              border-radius: 8px;
              overflow: hidden;
              box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover{
                box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
              }

              .HotAudio__thumbnail{
                width: 100%;
                height: 120px;
                overflow: hidden;
                position: relative;

                img{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: all 0.3s ease;
                }

                .HotAudio__play-btn{
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 40px;
                  height: 40px;
                  background: rgba(0, 0, 0, 0.6);
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: all 0.3s ease;

                  .HotAudio__play-icon{
                    color: white;
                    font-size: 20px;
                  }
                }

                &:hover {
                  img{
                    transform: scale(1.05);
                  }
                  
                  .HotAudio__play-btn{
                    background: rgba(0, 0, 0, 0.8);
                    transform: translate(-50%, -50%) scale(1.1);
                  }
                }
              }

              .HotAudio__info{
                padding: 12px;
                display: flex;
                flex-direction: column;
                gap: 8px;

                .HotAudio__title{
                  font-size: 14px;
                  font-weight: bold;
                  color: #333;
                  line-height: 1.4;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .HotAudio__subtitle{
                  font-size: 12px;
                  color: #666;
                  line-height: 1.4;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .HotAudio__tags{
                  display: flex;
                  flex-wrap: wrap;
                  gap: 4px;

                  .HotAudio__tag{
                    font-size: 10px;
                    color: $--color-primary;
                    background: $--color-primary-light-9;
                    border: 1px solid $--color-primary-light-7;
                    padding: 2px 6px;
                    border-radius: 12px;
                    white-space: nowrap;
                  }
                }

                .HotAudio__meta{
                  margin-top: 4px;
                  display: flex;
                  flex-direction: column;
                  gap: 6px;

                  .HotAudio__author,
                  .HotAudio__institution{
                    font-size: 11px;
                    color: #999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    span{
                      font-size: 12px;
                      color:$--color-text-regular;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .News__wrap{
      width: 100%;
      margin-top: 24px;
      .News__content{
        width: 1200px;
        margin: 0 auto;
        .News__card{
          width: 100%;
          display: flex;
          background: white;
          border-radius: 8px;
          box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
          padding: 16px;
          gap: 16px;
          margin-top: 24px;
          .News__cover {
            width: 500px;
            height: 326px;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            .News__cover-img {
              flex-shrink: 0;
              min-width: 100%;
              min-height: 100%;
              width: auto;
              height: auto;
              object-fit: cover; /* 关键属性：保持比例并填充整个容器 */
              transition: all 0.3s ease;
            }
          }
          .News__items{
            width: 0px;
            flex: 1;
            .News__item{
              .NewsItem__wrap{
                width: 100%;
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 0px 8px;
                border-radius: 4px;
                &:hover{
                  background-color: $--color-primary;
                  color: white;
                  .News__text,.News__date,.News__num{
                    color: white;
                  }
                }
                .News__type{
                  font-size: 12px;
                  color: white;
                  background: $--color-primary;
                  padding: 2px 4px;
                  border-radius: 4px;
                }
                .News__date{
                  color:$--color-text-secondary-2;
                }
                .News__num{
                  color:$--color-primary;
                }
                .News__text{
                  width: 0px;
                  flex: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: $--color-text-regular;
                  padding: 8px;
                  cursor: pointer;
                  border-radius: 4px;
                  margin: 4px 0px;
                }
              }
              .News__line{
                width: 100%;
                border-bottom: 1px dashed $--border-color-base;
              }
            }
          }
        }
      }
    }
    .Title__wrap{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      .Title__content{
        font-size: 24px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
        &::before{
          content: '';
          display: inline-block;
          width: 4px;
          height: 20px;
          background-color: $--color-primary;
          border-radius: 4px;
        }
      }
      .Title__content--1{
        font-size: 18px;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 8px;
        color:$--color-primary;
        &::before{
          content: '';
          display: inline-block;
          width: 4px;
          height: 4px;
          background-color: $--color-primary;
        }
      }
      .More__content{
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 12px;
        .More__btn{
          width: fit-content;
          color: $--color-primary;
          font-size: 14px;
          cursor: pointer;
          border: 1px solid $--color-primary;
          background: $--color-primary-light-7;
          border-radius: 4px;
          padding: 4px 8px;
          font-size: 13px;
          display: flex;
          align-items: center;
          &:hover{
            opacity: .8;
          }
          svg,svg * {
            fill:$--color-primary;
          }
        }
        .More__text{
          font-size: 13px;
          color:$--color-text-secondary;
          cursor: pointer;
          &:hover{
            color: $--color-primary;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  @import '@zkwq/business/dist/var.scss';
  .theme-popover{
    margin-top: 28px !important;
  }
  .theme-item{
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    &.active{
      background-color: $--color-primary;
      color: white;
    }
    &:hover{
      background-color: $--color-primary;
      color: white;
    }
  }
</style>